<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="card">
  <p id="firstName"></p>
  <p id="lastName"></p>
  <p id="age"></p>
</div>
<script src="./js/ksVue.js"></script>
<script>

  const user = {
    name: '战三',
    birth: '2000-01'
  }


  const showFirstName = () => {
    document.getElementById('firstName').textContent = `姓：${ user.name[0] }`
  }
  const showLastName = () => {
    document.getElementById('lastName').textContent = `姓：${ user.name.slice(1) }`
  }
  const showAge = () => {
    const birthday = new Date(user.birth).getTime()
    const today = new Date().getTime()

    const age = ((today - birthday) / 365 / 24 / 60 / 60 / 1000).toFixed(1)
    document.getElementById('age').textContent = `年龄：${ age }`
  }

  ksVue(user)

  autorun(showFirstName)
  autorun(showLastName)
  autorun(showAge)

  // 改变了name，需要手动调用函数（2个）。
  user.name = '李四'

  // 改变了birth，需要手动调用函数（1个）。
  user.birth = '2002-03'


  /**
   * 怎么实现响应式：
   * 如果有一百个属性，对应的有150个事件，需要每次都认为的触发一次吗？
   */

</script>
</body>
</html>
